@font-face {
  font-family: 'Krabby';
  src: url('..\\fonts\\Krabby Patty.ttf') format('truetype'); /*URL to font*/
}

html, body {
  height: 100%; /* Ensures html and body take up full screen height */
  margin: 0;   /* Removes default browser margins */
  overflow: hidden; /* Prevents scrollbars if image slightly exceeds viewport */
}

.page {
    display: none;
}

.active {
    display: block;
}

#main-picture {
  background-image: url('..\\img\\img-main.jpg');
  background-position: center;
  background-repeat: no-repeat; 
  background-size: cover; 
  height: 100vh; 
  width: 100vw; 
}

.img-center {
  height: 100vh;
  width: 100vw;
  max-width: 400px;
  /*max-height: 670px;*/
  animation: pulse 1.8s linear infinite;
}

.animate {
  animation: zoom 1s ease;
}

@keyframes zoom {
    0%   { transform: scale(1); }
    100% { transform: scale(4); }
}

@keyframes pulse {
    0%, 100%   { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Thirty Years */

#main-picture-ty {
  background-image: url('..\\img\\30y-bg.jpg');
  background-position: center; /* Centers the image in the container */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover; /* Scales the image to cover the entire area while maintaining aspect ratio */
  height: 100vh; /* Sets the height to 100% of the viewport height */
  width: 100vw; /* Sets the width to 100% of the viewport width */
}

.img-center-ty {
  position: absolute;
  height: 100vh; /* Sets the height to 100% of the viewport height */
  width: 100vw; 
  animation: fade-in 2s ease;
}

.bubbleBoy {
  width: 200px;
  position: absolute;
  top: 5%;
  animation: float 4s linear infinite, fade-in 5s ease;
}

.bubbleStupid {
  width: 200px;
  position: absolute;
  top: 65%;
  left: 40%;
  animation: floatStupid 5s linear infinite, fade-in 5s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}

@keyframes floatStupid {
  0%, 100% {
    transform: translateY(30px);
  }
  50% {
    transform: translateY(0);
  }
}

/* Main */
#main-picture-main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('..\\img\\img-arena.jpg') center / cover no-repeat;
  z-index: -1;
}

.container {
  width: 100%;
  height: 100vh;
  /*position: relative;
  flex-direction: column;*/
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.info-wrapper {
  position: relative;
}

.wrapper img {
  align-self: center;
  margin: 15px;
}

section {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.img-info {
  height: 100vh;
  width: 100%;
}

.btn-ubi {
  background-color: #744831;
  position: absolute;
  top: 50%;
  left: 35%;
  text-decoration: none;
  color: white;
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 10pt;
}

.btn-wp {
  background-color: #0ba27c;
  position: absolute;
  top: 70%;
  left: 30%;
  text-decoration: none;
  color: white;
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 10pt;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.krabby-font {
  font-family: 'Krabby';
}

.scroll {
  animation: letsScroll infinite linear;
}

@keyframes letsScroll {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}

.scroll-indicator {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  cursor: pointer;
  animation: bounce 1.5s infinite;
  color: white;
  transition: opacity 0.3s ease;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}